<template>
	<view class="time-order">
		<view class="top">
			<!-- <uni-search-bar @confirm="confirm" @input="input" /> -->
			<!-- <SearchBarCom></SearchBarCom> -->
			<view class="top-left">
				<SearchBarCom placeholder="搜索姓名,手机等"></SearchBarCom>
			</view>
			<button @click="cancelAll">
				<text>取消所有</text>
			</button>
		</view>
		<view class="tab-bar">
			<text :class="['bar',currentIndex==0?'active':'']" @click="changeTab(0)">全部</text>
			<text :class="['bar',currentIndex==1?'active':'']" @click="changeTab(1)">成功</text>
			<text :class="['bar',currentIndex==2?'active':'']" @click="changeTab(2)">已取消</text>
			<text :class="['bar',currentIndex==3?'active':'']" @click="changeTab(3)">已核销</text>
			<text :class="['bar',currentIndex==4?'active':'']" @click="changeTab(4)">未核销</text>
			
		</view>
		<view class="content">
			<view class="tips">
				共有{{ total }}条符合条件记录
			</view>
			<view class="card-item" v-if="currentIndex==0">
				<block v-for="(item,index) in orderList" :key="item.id">
					<TimeOrderItem :item="item" @updateDel="updateDel(index,0,$event)" @cancelCheck="cancelCheck(index)"></TimeOrderItem>
				</block>
			</view>
			<view class="card-item" v-if="currentIndex==1">
				<block v-for="(item,index) in successList" :key="item.id">
					<TimeOrderItem :item="item" @updateDel="updateDel(index,1,$event)" @cancelCheck="cancelCheck(index)"></TimeOrderItem>
				</block>
			</view>
			<view class="card-item" v-if="currentIndex==2">
				<block v-for="(item,index) in cancelList" :key="item.id">
					<TimeOrderItem :item="item" @updateDel="updateDel(index,2,$event)" @cancelCheck="cancelCheck(index)"></TimeOrderItem>
				</block>
			</view>
			<view class="card-item" v-if="currentIndex==3">
				<block v-for="(item,index) in checkoutedList" :key="item.id">
					<TimeOrderItem :item="item" @updateDel="updateDel(index,3,$event)" @cancelCheck="cancelCheck(index)"></TimeOrderItem>
				</block>
			</view>
			<view class="card-item" v-if="currentIndex==4">
				<block v-for="(item,index) in uncheckoutedList" :key="item.id">
					<TimeOrderItem :item="item" @updateDel="updateDel(index,4,$event)" @cancelCheck="cancelCheck(index)"></TimeOrderItem>
				</block>
			</view>
			<!-- <view class="card-item" v-if="currentIndex==5">
				<block v-for="item in uncheckoutedList" :key="item.id">
					<TimeOrderItem :item="item"></TimeOrderItem>
				</block>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { GetHomeHelperList, CheckoutCode,GetOrderList,GetOrderListById,CancelAll } from '../../api/index.js'

	export default {
		data() {
			return {
				currentIndex:0,
				homeHhelperList:[],
				successList:[],
				cancelList:[],
				checkoutedList:[],
				recommendList:[],
				uncheckoutedList:[],
				orderList:[]
			};
		},
		onLoad(){
			this.getHomeHelperList()
			this.getOrderList()
			console.log('22')
		},
		methods:{
			confirm(){},
			input(){},
			changeTab(index){
				console.log('q')
				this.currentIndex = index
				this.getOrderList()
				if(index==1){
					return this.successList = this.filterDataList(0)
				}
				if(index==2){
					return this.cancelList = this.filterDataList(1)
				}
				if(index==3){
					return this.checkoutedList = this.filterDataList(2)
				}
				if(index==4){
					console.log('f')
					return this.uncheckoutedList = this.filterDataList(3)
				}
			},		
			async getOrderList(){
				const {data:res} = await GetOrderListById(1)
				console.log(res,'res预约名单')
				this.orderList = res.data
			},
			async getHomeHelperList(){
				const { data:res } = await GetHomeHelperList()
				console.log(res)
				res.data.forEach(item=>{
					item.disc = item.disc.split('，')
				})
				console.log(res.data,'rrr')
				this.homeHhelperList = res.data
			},
			// 过滤数据
			filterDataList(num){
				return this.orderList.filter(item=>item.status==num)
			},
			filterDataListByRecommend(){
				return this.orderList.filter(item=>item.is_recommend==1)
			},
			filterDataListByUp(){
				return this.orderList.filter(item=>item.is_up==1)
			},
			updateDel(i,type,e){
				console.log(i,type,'i')
				
				if(type==0){
					this.orderList.splice(i,1)
				}
				if(type==1){
					this.successList.splice(i,1)
				}
				if(type==2){
					this.cancelList.splice(i,1)
				}
				if(type==3){
					this.checkoutedList.splice(i,1)
				}
				if(type==4){
					this.uncheckoutedList.splice(i,1)
				}
			},
			updateCancel(){
				console.log(i,type,'i')
				
				if(type==0){
					// this.orderList.splice(i,1)
					this.orderList.some(item=>{
						item[i].status = 1
					})
				}
				if(type==1){
					// this.successList.splice(i,1)
					this.successList.some(item=>{
						item[i].status = 1
					})
				}
				if(type==2){
					// this.cancelList.splice(i,1)
				}
				if(type==3){
					// this.checkoutedList.splice(i,1)
					this.checkoutedList.some(item=>{
						item[i].status = 1
					})
				}
				if(type==4){
					// this.uncheckoutedList.splice(i,1)
					this.uncheckoutedList.some(item=>{
						item[i].status = 1
					})
				}
			},
			// 取消所有
			async cancelAll(){
				this.currentIndex = 0
				const {data:res} = await CancelAll()
				if(res.status==0){
					this.orderList.forEach(item=>{
						item.status = 1
					})
				}
			}
		},
		computed:{
			total(){
				if(this.currentIndex==0){
					return this.orderList.length
				}
				else if(this.currentIndex==1){
					return this.successList.length
				}
				else if(this.currentIndex==2){
					return this.cancelList.length
				}
				else if(this.currentIndex==3){
					return this.checkoutedList.length
				}
				else if(this.currentIndex==4){
					return this.uncheckoutedList.length
				}
				// else if(this.currentIndex==5){
				// 	return this.uncheckoutedList.length
				// }
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
.time-order{
	padding: 20rpx;
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20rpx;
		.top-left{
			flex: 1;
			margin-right: 20rpx;
		}
		button{
			width: 220rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #1E90FF;
			color: #fff;
			font-size: 30rpx;
			margin-left: 50rpx;
		}
	}
	.tab-bar{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 10rpx;
		.bar{
			font-weight: bold;
			line-height: 60rpx;
			&.active{
				color: #1E90FF;
				border-bottom: 3px solid #1E90FF;
				// padding-bottom: 10rpx;
				box-sizing: border-box;
			}
		}
	}
	.content{
		.tips{
			text-align: center;
			color: #666;
			line-height: 100rpx;
		}
		.card-item{
			margin: 20rpx;
		}
	}
}
</style>
